<template>
  <div style="text-align: center;">
    <Page
      :current="pageConfig.current"
      :total="pageConfig.total"
      :page-size="pageConfig.pageSize"
      :page-size-opts="pageConfig.pageSizeOpts"
      :size="pageConfig.size"
      :placement="pageConfig.placement"
      :simple="pageConfig.simple"
      :show-total="pageConfig.showTotal"
      :show-elevator="pageConfig.showElevator"
      :show-sizer="pageConfig.showSizer"
      :class-name="pageConfig.className"
      :styles="pageConfig.styles"
      :transfer="pageConfig.transfer"
      :prev-text="pageConfig.prevText"
      :next-text="pageConfig.nextText"
      @on-change="handleChange"
      @on-page-size-change="handleChangeSize"
    />
  </div>
</template>
<script>
export default {
  props: {
    // 分页参数
    pagingParams: {
      type: Object,
      default: function () {
        return {
          list: [], // 数据列表
          pageNum: 1, // 当前页数
          pageSize: 10, // 当前页面条数
          pages: 1, // 总页数
          total: 0, // 总条数
          firstPage: 1, // 第一页
          prePage: 1, // 上一页
          nextPage: 1, // 下一页
          lastPage: 1, // 最后一页
          ISFirstPage: false, // 是否是第一页
          ISLastPage: false, // 是否是最后一页
          hasPreviousPage: false, // 是否有上一页
          hasNextPage: false, // 是否有下一页
          navigatePages: 7, // 导航页数
          navigatepageNums: [1] // 导航页列表
        }
      }
    },
    config: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      // 分页参数配置https://www.iviewui.com/components/page
      defaultPageConfig: {
        current: 1, // 当前页码，支持 .sync 修饰符
        total: 0, // 数据总数
        pageSize: 10, // 每页条数
        pageSizeOpts: [10, 20, 30, 40, 50], // 每页条数切换的配置
        placement: 'bottom', // 条数切换弹窗的展开方向，可选值为 bottom 和 top
        size: undefined, // 可选值为small（迷你版）或不填（默认）
        simple: false, // 简洁版
        showTotal: true, // 显示总数
        showElevator: true, // 显示电梯，可以快速切换到某一页
        showSizer: true, // 显示分页，用来改变page-size
        className: undefined, // 自定义 class 名称
        styles: {}, // 自定义 style 样式
        transfer: false, // 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
        prevText: undefined, // 替代图标显示的上一页文字，未使用
        nextText: undefined // 替代图标显示的下一页文字，未使用
      }
    }
  },
  computed: {
    pageConfig() {
      let config = Object.assign(this.defaultPageConfig)
      for (let key in this.config) {
        config[key] = this.config[key]
      }
      config.current = this.pagingParams.pageNum
      config.total = this.pagingParams.total
      config.pageSize = this.pagingParams.pageSize
      return config
    }
  },
  methods: {
    handleChange(page) {
      this.$emit('on-change', page, this.pagingParams.pageSize)
    },
    handleChangeSize(pageSize) {
      this.$emit('on-change', 1, pageSize)
    }
  }
}
</script>
